import { ProDescriptions } from "@ant-design/pro-components";
import FileUpload from "@/components/FileUpload";
import { FileGroup } from "common/utils/data";
import { useMemo, useRef } from "react";
import { userV1ControllerUpdateMine } from "@/services/auto/user";
import { useModel } from "@umijs/max";
import { Card, message } from "antd";
import { completeImgUrl } from "common/utils/utils";
import Avatar from "@/components/Avatar";

export default function (){
  const actionRef = useRef();

  const {data, runAsync} = useModel('user', ({data, runAsync})=>{
    return {
      data,
      runAsync,
    }
  });

  const dataSource=  useMemo(()=>{
    return {
      ...data,
      avatar: data?.avatar ? [data.avatar] : undefined,
    }
  },[data])

  return <Card>
    <div className="flex">
      <div>
        <ProDescriptions
          actionRef={actionRef}
          column={1}
          dataSource={dataSource}
          editable={{
            onSave: (recordKey, values)=>{
              const name = recordKey as string;
              let value = values[name as keyof typeof values];
              if(name === 'avatar'){
                // @ts-ignore
                value = value?.[0];
              }
              return userV1ControllerUpdateMine({
                [name]: value,
              }).then(()=>{
                runAsync();
                message.success('保存成功');
              })
            },
          }}
          columns={[
            {
              title: '昵称',
              key: 'name',
              dataIndex: 'name',
              editable: false,
            },
            {
              title: '手机',
              key: 'mobile',
              dataIndex: 'mobile',
              editable: false,
            },
            {
              title: '头衔',
              key: 'title',
              dataIndex: 'title',
              editable: false,
            },
            {
              title: '签名',
              key: 'signature',
              dataIndex: 'signature',
              valueType: 'textarea',
              fieldProps: {
                maxLength: 500,
                showCount: true,
              },
            },
            {
              title: '注册时间',
              key: 'createTime',
              dataIndex: 'createTime',
              valueType: 'dateTime',
              editable: false,
            },
          ]}
        />
      </div>
      <div>
        <ProDescriptions
          actionRef={actionRef}
          column={1}
          dataSource={dataSource}
          editable={{
            onSave: (recordKey, values)=>{
              const name = recordKey as string;
              let value = values[name as keyof typeof values];
              if(name === 'avatar'){
                // @ts-ignore
                value = value?.[0];
              }
              return userV1ControllerUpdateMine({
                [name]: value,
              }).then(()=>{
                runAsync();
                message.success('保存成功');
              })
            },
          }}
          layout="vertical"
          columns={[
            {
              title: '头像',
              dataIndex: 'avatar',
              key: 'avatar',
              formItemProps: {
                extra: '请上传jpg,jpeg,png格式且小于5MB的图片',
                rules: [
                  {
                    required: true,
                    message: '请上传头像',
                  }
                ]
              },
              renderFormItem: () => {
                return <FileUpload fileGroup={FileGroup.USER} />;
              },
              render: (_, entity)=>{
                return <Avatar size={102} src={completeImgUrl(entity?.avatar?.[0], '?x-oss-process=image/resize,m_fill,w_102,h_102')} />
              }
            },
          ]}
        />
      </div>
    </div>
  </Card>
}
